<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div data-v-279ea4b2="" class="pic-404"><img data-v-279ea4b2="" src="http://warehouse-api.lanbeiduo.com/api/file/download/AihcaHbtRQ_404.png" alt="404"
          class="pic-404__parent"><img data-v-279ea4b2="" src="http://warehouse-api.lanbeiduo.com/api/file/download/mftakZ3l2i_404_icon.png" alt="404"
          class="pic-404__child left"><img data-v-279ea4b2="" src="http://warehouse-api.lanbeiduo.com/api/file/download/mftakZ3l2i_404_icon.png" alt="404"
          class="pic-404__child mid"><img data-v-279ea4b2="" src="http://warehouse-api.lanbeiduo.com/api/file/download/mftakZ3l2i_404_icon.png" alt="404"
          class="pic-404__child right"></div>
      <div data-v-279ea4b2="" class="bullshit">
        <div data-v-279ea4b2="" class="bullshit__oops"> 404错误! </div>
        <div data-v-279ea4b2="" class="bullshit__headline"> 找不到网页！ </div>
        <div data-v-279ea4b2="" class="bullshit__info"> 对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'Error'
})

const userStore = useUserStore()
const router = useRouter()
const toDashboard = () => {
  let routeName = JSON.parse(localStorage.getItem('userInfo')).authority.defaultRouter
  sessionStorage.setItem('topActive', routeName)
  router.push({ name: routeName, replace: true })
}
</script>

<style lang="scss">
.wscn-http404-container {
  position: relative;
  width: 75rem;
  padding: 0 3.125rem;
  overflow: hidden;
  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wscn-http404 {
  position: relative;
  width: 75rem;
  padding: 0 3.125rem;
  overflow: hidden;
}
.wscn-http404 .pic-404{
    position: relative;
    float: left;
    width: 37.5rem;
    overflow: hidden;
}
.wscn-http404 .pic-404__parent{
    width: 100%;
}
.wscn-http404 .pic-404__child.left{
    width: 5rem;
    top: 1.0625rem;
    left: 13.75rem;
    opacity: 0;
    animation-name: cloudLeft-data-v-279ea4b2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.wscn-http404 .pic-404__child.mid{
    width: 2.875rem;
    top: .625rem;
    left: 26.25rem;
    opacity: 0;
    animation-name: cloudMid-data-v-279ea4b2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
}
.wscn-http404 .pic-404__child.right{
    width: 3.875rem;
    top: 6.25rem;
    left: 31.25rem;
    opacity: 0;
    animation-name: cloudRight-data-v-279ea4b2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.wscn-http404 .pic-404__child{
    position: absolute;
}
@keyframes cloudLeft-data-v-279ea4b2{
  0% {
    top: 1.0625rem;
    left: 13.75rem;
    opacity: 0;
}
20% {
    top: 2.0625rem;
    left: 11.75rem;
    opacity: 1;
}
80% {
    top: 5.0625rem;
    left: 5.75rem;
    opacity: 1;
}
100% {
    top: 6.0625rem;
    left: 3.75rem;
    opacity: 0;
}
}

@keyframes cloudMid-data-v-279ea4b2{
  0% {
    top: 1.0625rem;
    left: 13.75rem;
    opacity: 0;
}
20% {
    top: 2.0625rem;
    left: 11.75rem;
    opacity: 1;
}
80% {
    top: 5.0625rem;
    left: 5.75rem;
    opacity: 1;
}
100% {
    top: 6.0625rem;
    left: 3.75rem;
    opacity: 0;
}
}

@keyframes cloudRight-data-v-279ea4b2{
  0% {
    top: 6.25rem;
    left: 31.25rem;
    opacity: 0;
}
20% {
    top: 7.5rem;
    left: 28.75rem;
    opacity: 1;
}
80% {
    top: 11.25rem;
    left: 21.25rem;
    opacity: 1;
}
100% {
    top: 12.5rem;
    left: 18.75rem;
    opacity: 0;
}
}
.wscn-http404 .bullshit{
    position: relative;
    float: left;
    width: 18.75rem;
    padding: 1.875rem 0;
    overflow: hidden;
}
.wscn-http404 .bullshit__oops{
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    color: #1482f0;
    opacity: 0;
    margin-bottom: 1.25rem;
    animation-name: slideUp-data-v-279ea4b2;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}
@keyframes slideUp-data-v-279ea4b2{
  0% {
    transform: translateY(3.75rem);
    opacity: 0;
}
100% {
    transform: translateY(0);
    opacity: 1;
}
}
.wscn-http404 .bullshit__headline{
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #222;
    font-weight: 700;
    opacity: 0;
    margin-bottom: .625rem;
    animation-name: slideUp-data-v-279ea4b2;
    animation-duration: .5s;
    animation-delay: .1s;
    animation-fill-mode: forwards;
}
.wscn-http404 .bullshit__info{
    font-size: .8125rem;
    line-height: 1.3125rem;
    color: grey;
    opacity: 0;
    margin-bottom: 1.875rem;
    animation-name: slideUp-data-v-279ea4b2;
    animation-duration: .5s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}
.wscn-http404 .bullshit__return-home{
    display: block;
    float: left;
    width: 6.875rem;
    height: 2.25rem;
    background: #1482f0;
    border-radius: 6.25rem;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: .875rem;
    line-height: 2.25rem;
    cursor: pointer;
    animation-name: slideUp-data-v-279ea4b2;
    animation-duration: .5s;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
</style>
